<template>
<div class="threshold-division">
    <title-bar title="混淆矩阵和评估指标"></title-bar>
    <div class="tab">
        <el-radio-group v-model="type" @change="changeType">
            <el-radio-button v-for="(item, i) in typeList" :key="i" :label="item.value">{{item.name}}</el-radio-button>
        </el-radio-group>
        <div class="slider-box">
            <span class="title">阈值划分</span>
            <el-slider input-size="mini" v-show="type===0" v-model="probability" :min="0" :max="1" :step="0.0001" show-input @change="changeVal"></el-slider>
            <el-slider input-size="mini" v-show="type===1" v-model="sample" :min="0" :max="1" :step="0.0001" show-input @change="changeVal"></el-slider>
        </div>
    </div>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import {
    mapMutations
} from 'vuex'
export default {
    name: 'ThresholdDivision',
    components: {
        TitleBar
    },
    data () {
        return {
            type: 0,
            typeList: [{
                    name: '概率选择',
                    value: 0
                },
                {
                    name: '样本选择',
                    value: 1
                }
            ],
            probability: 0.5,
            sample: 0.5
        }
    },
    methods: {
        ...mapMutations({
            setProbability: 'common/setProbability',
            setSample: 'common/setSample',
            setType: 'common/setType'
        }),
        changeType (val) {
            this.setType(val)
        },
        changeVal (val) {
            this.type === 0 ? this.setProbability(val) : this.setSample(val)
        }
    }
}
</script>

<style lang="less">
.threshold-division {
    width: 100%;

    .tab {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 170px;

        .slider-box {
            margin-top: 10px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .title {
                color: #333;
                padding-right: 10px;
            }
        }
        .el-radio-group {
            margin-top: -80px;
            text-align: center;
            .el-radio-button__inner {
                min-width: 80px;
            }
        }

        .el-slider {
            width: 80%;
            padding: 5px 10px;
            border: 1px solid #EBEEF5;
            border-radius: 4px;
        }
    }
}
</style>
